<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules">
      <el-form-item label="时间基准">
        <el-radio-group v-model="queryParams.shift">
          <el-radio label="班次">班次</el-radio>
          <el-radio label="单日">单日</el-radio>
        </el-radio-group>
      </el-form-item>

          <el-form-item label="时间" prop="dataTime" label-width="40px">
            <WeekTimePicker type="date" :options="disabledOptions" v-model="queryParams.dataTime" :clearable="false" style="width: 130px"/>
          </el-form-item>

          <el-form-item label="设备基准">
            <el-radio-group v-model="queryParams.selectedEpt" @change="changeVal">
              <el-radio label="设备群">设备群</el-radio>
              <el-radio label="设备线">设备线</el-radio>
            </el-radio-group>
            <el-button style="margin-left: 20px;" type="primary" icon="Search" @click="getQueryData" v-if="!isShow">查询</el-button>
          </el-form-item>

          <el-form-item label="设备ID" prop="machineId" label-width="60px" v-if="isShow">
            <el-select v-model="queryParams.machineId" placeholder="请选择设备ID" style="width: 150px">
              <el-option
                  v-for="dict in machineIdOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>

            <el-button style="margin-left: 10px;" type="primary" icon="Search" @click="getQueryData">查询</el-button>
          </el-form-item>

    </el-form>
      <t-ag-grid
        v-show="isTableShow"
        style="margin-bottom: 10px; height: calc(100% - 40px);"
        class="add-margin"
        :column-defs="columns"
        :row-data="tableData"
        :row-buffer="20"
        :tooltipShowDelay="0"
        align="center"
        :getRowStyle ="getRowStyle"
        :defaultColDef = "{
          suppressMenu:true,
          resizable: false
        }"
        header-align="center"
      />
  </div>
</template>

<script setup name="WarnDetaile">
  import { getMachineAllListDiewa, queryTableData, getColumns, getTableData } from './config'
  import moment from 'moment'
  const { proxy } = getCurrentInstance()

  const queryParams = reactive({
    shift: '班次',
    dataTime: moment().subtract(1, 'days').format('YYYY-MM-DD'),
    selectedEpt: '设备群',
    machineId: null
  })

  const rules = {
    machineId: [{ required: true, message: "请选择", trigger: "input" }]
  }

  onActivated(() => {
    let { selectedEpt, dataTime, machineId } = history?.state
    if(selectedEpt && dataTime){
      if(selectedEpt === '设备线'){
        isShow.value = true
        queryParams.machineId = machineId
      } else {
        isShow.value = false
      }
      queryParams.dataTime = dataTime
      queryParams.selectedEpt = selectedEpt

      getQueryData()
    }
  })

  const machineIdOptions = ref([])
  const isShow = ref(false)
  const isTableShow = ref()
  const loading = ref(false)

  const columns = ref([])
  const tableData = ref([])

  const changeVal = (val) => {
    val === '设备线' ? isShow.value = true : isShow.value = false
  }

  const disabledOptions = {
    disabledDate (date) {
      return date && date.valueOf() > moment().subtract(1, 'days').valueOf()
    }
  }

  const getQueryData = () => {
    proxy.$refs.queryRef.validate(valid => {
      if(valid){
        loading.value = true
        queryTableData({
          dataTime: moment(queryParams.dataTime).format('YYYY-MM-DD'),
          type: queryParams.shift === '单日' ? 'D' : 'S',
          machineId: queryParams.selectedEpt === '设备群' ? `BY 叠瓦` : queryParams.machineId
        }).then((res) => {
          let _target = res.slice(1)
          let tempAgv = []
          let tempCount = []
          let tempTime = []

          tempAgv[0] = Math.max.apply(null, _target.map((item) => item.agv1))
          tempAgv[1] = Math.max.apply(null, _target.map((item) => item.agv2))
          tempAgv[2] = Math.max.apply(null, _target.map((item) => item.agv3))
          tempAgv[3] = Math.max.apply(null, _target.map((item) => item.agv4))
          tempAgv[4] = Math.max.apply(null, _target.map((item) => item.agv5))
          tempAgv[5] = Math.max.apply(null, _target.map((item) => item.agv6))
          tempAgv[6] = Math.max.apply(null, _target.map((item) => item.agv7))
          tempAgv[7] = Math.max.apply(null, _target.map((item) => item.agv8))
          tempCount[0] = Math.max.apply(null, _target.map((item) => item.count1))
          tempCount[1] = Math.max.apply(null, _target.map((item) => item.count2))
          tempCount[2] = Math.max.apply(null, _target.map((item) => item.count3))
          tempCount[3] = Math.max.apply(null, _target.map((item) => item.count4))
          tempCount[4] = Math.max.apply(null, _target.map((item) => item.count5))
          tempCount[5] = Math.max.apply(null, _target.map((item) => item.count6))
          tempCount[6] = Math.max.apply(null, _target.map((item) => item.count7))
          tempCount[7] = Math.max.apply(null, _target.map((item) => item.count8))
          tempTime[0] = Math.max.apply(null, _target.map((item) => item.time1))
          tempTime[1] = Math.max.apply(null, _target.map((item) => item.time2))
          tempTime[2] = Math.max.apply(null, _target.map((item) => item.time3))
          tempTime[3] = Math.max.apply(null, _target.map((item) => item.time4))
          tempTime[4] = Math.max.apply(null, _target.map((item) => item.time5))
          tempTime[5] = Math.max.apply(null, _target.map((item) => item.time6))
          tempTime[6] = Math.max.apply(null, _target.map((item) => item.time7))
          tempTime[7] = Math.max.apply(null, _target.map((item) => item.time8))

          columns.value = getColumns(res, tempAgv, tempCount,  tempTime)
          tableData.value = _target

          loading.value = false
          isTableShow.value = true
        })
      }
    })
  }

  const getRowStyle = (params) => {
    if(params.rowIndex === 0){
      return {
        background: '#bdd7ee'
      }
    }
  }

  getMachineAllListDiewa().then((res) => {
    res.rows.forEach((item) => {
      machineIdOptions.value.push({
        label: item,
        value: item
      })
    })
  })

</script>

<style lang="less" scoped>
.el-radio {
  margin-right: 8px;
}

:deep(.custom-rate) {
  background-color: #fce4d6;
}

</style>
